<script setup>
import { getAllWarehouseApi } from '@/api/base'
import { useWarehouseStore } from '@/store/warehouse'
const { proxy } = getCurrentInstance()

const warehouseList = ref([])
function getAllWarehouseList() {
    getAllWarehouseApi().then(response => {
        warehouseList.value = response.data
    })
}
getAllWarehouseList()

const form = ref({ warehouseId: useWarehouseStore().id })

const rules = {
    warehouseId: [{ required: true, message: "仓库ID不能为空", trigger: "blur" }]
}

/** 设置仓库按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            let id = form.value.warehouseId
            let name = warehouseList.value.find(it => it.id == id).name
            useWarehouseStore().setInfo({ id, name })
            proxy.$modal.msgSuccess("设置仓库成功");
        }
    });
}
</script>

<template>
    <div class="settings-wrapper">
        <el-col :span="8">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="仓库" prop="warehouseId">
                    <el-select v-model="form.warehouseId" placeholder="请选择仓库">
                        <el-option v-for="it in warehouseList" :key="it.id" :label="it.name" :value="it.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </el-form-item>
            </el-form></el-col>
    </div>
</template>

<style lang="scss">
.settings-wrapper {
    padding: 20px;
}
</style>